<template>
	<view class="">
		<view class="topFixed_top" style="width: 100%;position: fixed;top: 0;z-index: 999;background: #fff;">
			<view class="topFixed">
				<view class="" :style="'height:'+navBarInfo.statusBarHeight+'px;'">

				</view>
				<view class="flex align-center justify-between" :style="'height:'+navBarInfo.navBarHeight+'px;'">
					<view @click="onLocation" class="flex flex-1 align-center" style="">
						<view style="font-size: 0;padding-left: 24rpx;">
							<image style="width: 42rpx;height: 42rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/dingwei.png" mode=""></image>
						</view>
						<view class="text-overflow1" style="font-size: 30rpx;color: #333333;">
							{{positionText?positionText:address?address:'请选择'}}
						</view>
						<view style="font-size: 0;">
							<image style="width: 22rpx;height: 22rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/downArrow.png" mode=""></image>
						</view>
					</view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx;color: #fff;">
						<view class="flex align-center" style="background: #f4f4f4;border-radius: 32rpx;">
							<view @click="changeRange(0)"
								style="padding: 12rpx 30rpx;border: 2rpx solid transparent;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==0?'color:#ffffff;background:#EBBF88;':''">
								同城
							</view>
							<view @click="changeRange(1)"
								style="padding: 12rpx 30rpx;border: 2rpx solid transparent;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==1?'color:#ffffff;background:#EBBF88;':''">
								全国
							</view>
						</view>
					</view>
					<view class="flex-1">

					</view>
				</view>
				<!-- 搜索 -->
				<view class="flex align-center justify-evenly" style="margin-top: 15rpx;">
					<view class="" style="width: 168rpx;color: #333333;text-align: center;font-size: 30rpx;font-weight: 700;">
						{{
							shopType==1?'人气爆款':
							shopType==2?'最新上架':
							shopType==3?'最受好评':''
							}}
					</view>
					<view class="flex align-center"
						style="width: 558rpx;height: 64rpx;background: url(https://sz.vvv5g.com/assets/img/wxImg/searchBorder.png);background-size: 558rpx 64rpx;background-repeat: no-repeat;">
						<view class="" style="font-size: 0;padding-left: 32rpx;">
							<image style="width: 32rpx;height: 32rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/search.png" mode=""></image>
						</view>
						<view class="" style="font-size: 0;margin: 0 20rpx;">
							<image style="height: 20rpx;" src="https://sz.vvv5g.com/assets/img/wxImg/searchBar.png"
								mode="heightFix"></image>
						</view>
						<input class="flex-1" type="text" @input="search" v-model="keyWord" placeholder="商品名/品牌/商品种类/关键字"
							style="font-size: 22rpx;" placeholder-style="font-size:22rpx;color:#999">
					</view>
				</view>
				<view class="" style="height: 16rpx;">

				</view>
			</view>
			<view class="fu_chuang" v-if="show" @click="close">
				<view class="c_fu_chuang mar-auto">
					<view class="c_fu_txt_box flex">
						<view class="list_txt" v-for="(item,index) in navsList" :key="index" @click="fuActive(item.id)">
							<view class="fu_txt s28">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" >
				<view 
					style="display:flex;padding-left: 32rpx; height:52rpx;">
					<scroll-view style="white-space: nowrap;font-size: 0;width:750rpx;overflow:hidden;" scroll-with-animation
						scroll-x="true" :scroll-into-view="'t' + tid">
						<view style="display: inline-block;margin-right: 52rpx;" @click="onActive(item.id)"
							v-for="(item,index) in navsList" :key="index">
							<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
								<view :class="navIndex==item.id?'flex align-center active_item':'flex align-center'"
									:style="navIndex == item.id?'font-weight:600;':''" style="font-size: 26rpx;color: #333;">
									{{item.name}}
								</view>
							</view>
						</view>
					</scroll-view>
					<view class="fenleiimage" @click="onXianS" :style="tabisTrue?'position:fixed;right:0;':''">
						<image style="width: 34rpx;height: 34rpx;" src="@/static/store/fenglei2.png" mode=""></image>
					</view>
				</view>
				<!-- 排序类型 -->
				<view class="screen_list_box flex justify-evenly" style="background: #f4f4f4;">
					<view class="list_box flex align-center" v-for="(item,index) in screen_list" :key="index"
						@click="onActives(index)">
						<view :class="[listIndex == index ? 'active_txt' : 'active_txt1']" style="font-size: 24rpx;">
							{{item.txt}}
						</view>
						<view class="" style="font-size: 0;">
							<image style="width: 32rpx;height: 32rpx;" :src="listIndex == index?item.img1:item.img" mode="">
							</image>
						</view>
						<!-- <image class="img" :src="listIndex == index?item.img1:item.img" mode=""></image> -->
					</view>
				</view>
			</view>
		</view>
		
		<view class="" :style="'height:'+topFixedHeight+'px;'">

		</view>
		<!-- 商品列表 -->
		<view class="" style="margin-top: 0rpx;">
			<view v-for="(item,index) in list" @click="goGoodsDetail(item.id)" class="flex align-center" style="margin: 24rpx 24rpx;">
				<view class="" style="font-size: 0;margin-right: 28rpx;">
					<!-- <image style="width: 256rpx;height: 256rpx;border-radius: 8rpx;background: #f2f2f2;" :src="item.thumbnail" mode="aspectFill"></image> -->
					<image style="width: 256rpx;height: 256rpx;border-radius: 8rpx;background: #f2f2f2;" :src="item.images_src[0]" mode="aspectFill"></image>
				</view>
				<view class="flex-1 flex flex-column justify-between" style="height: 256rpx;padding-bottom: 4rpx;">
					<view class="text-overflow2" style="font-family: AppleSystemUIFont;font-size: 28rpx;color: #333333;line-height: 34rpx;">
						<!-- {{ spceType(item.title,item.difference,item.spec_type) }} -->
						{{item.title}}
					</view>
					<view class="text-overflow1" style="font-family: AppleSystemUIFont;font-size: 24rpx;color:#E7B77D;">
						#{{item.shop.shopname}}
					</view>
					<view class="flex align-center">
						<view class="flex align-end" style="color: #FF3F4A;">
							<view style="font-family: AppleSystemUIFont;font-size: 24rpx;">
								￥
							</view>
							<view style="font-family: AppleSystemUIFont;font-size: 44rpx;">
								{{item.price}}
							</view>
						</view>
						<view style="font-family: AppleSystemUIFont;color: #999999;font-size: 24rpx;margin-left: 20rpx;text-decoration: line-through;">
							￥{{item.praise}}
						</view>
					</view>
					<view class="flex">
						<view class="flex-1 flex align-center">
							<view class="" style="font-size: 0;">
								<image style="width: 32rpx;height: 32rpx;" src="@/static/shopping/fengxiang.png" mode=""></image>
							</view>
							<view class="" style="font-family: AppleSystemUIFont;font-size: 20rpx;color: #666666;">
								{{item.views}}
							</view>
						</view>
						<view class="flex-1 flex align-center">
							<view class="" style="font-size: 0;">
								<image style="width: 32rpx;height: 32rpx;" src="@/static/shopping/chakan.png" mode=""></image>
							</view>
							<view class="" style="font-family: AppleSystemUIFont;font-size: 20rpx;color: #666666;">
								{{item.to_num}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				// positionText:'',
				navBarInfo: {},
				topFixedHeight: 0,
				rangeIndex: 1, //0 同城 1 全国
				//搜索
				keyWord: '',
				shopType:1,//1 人气爆款  2 最新上架  3 最受好评
				// selectedAddress: '',
				// lng: '', //选择的经纬度
				// lat: '', //选择的经纬度
				page:1,
				lastPage:0,
				list:[],
				navsList:[],
				listIndex:0,
				navIndex: 0,
				screenIndex: 0,
				tid: 1,
				show: false,
				
				address: '',
				
				view_height: 0,
			}
		},
		computed: {
			address() {
				return this.$store.state.getLocation.address
			},
			address2() {
				return this.$store.state.getLocation.address2
			},
			// 选择的位置
			positionText() {
				console.log(this.$store.state.getLocation.positionText)
				return this.$store.state.getLocation.positionText
			},
			selectedAddress(){
				return this.$store.state.getLocation.selectedAddress
			},
			//选择位置经纬度
			lat(){
				return this.$store.state.getLocation.lat
			},
			lng(){
				return this.$store.state.getLocation.lng
			},
			rangeObj() {
				return this.$store.state.getLocation.rangeObj
			},
			...mapState(['icon'])
		},
		watch: {
			// 此处监听variable变量，当期有变化时执行
			rangeObj(newData,oldData) {
				// item1为新值，item2为旧值
				this.changeRange(newData.home);
			}
		},
		onLoad(options) {
			this.shopType = options.shopType;
			this.navBarInfo = this.$navBarInfo;
			this.view_height = parseInt(this.navBarInfo.navBarHeight)+parseInt(this.navBarInfo.statusBarHeight)+220
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.select('.topFixed_top').boundingClientRect(data => {
					this.topFixedHeight = data.height;
				}).exec();
			},300)
			// 获取商品列表
			// this.getGoodsData();
			this.getNavsList()
			this.changeRange(this.rangeObj.home);
		},
		onShow() {
			this.address = '定位中'
			this.$getLocation().then(res => {
				this.$request({
					url: 'common/getLocation',
					data: {
						lat: res.latitude,
						lng: res.longitude
					}
				}).then(jes => {
					this.address = jes.data.data.address_component.city
				})
			})
		},
		methods: {
			onXianS() {
				this.show = !this.show;
			
			},
			close() {
				this.show = false
			},
			onActive(id) {
				this.navIndex = id
				this.categoryid = id
				this.page = 1;
				this.getGoodsData()
			},
			onActives(index){
				if(this.listIndex==index){
					this.flag2 = !this.flag2;
				}
				this.listIndex = index;
				this.page = 1;
				this.getGoodsData();
			},
			// 获取类目列表
			getNavsList() {
				let that = this
				that.$request({
					url: 'common/categoryList'
				}).then(res => {
					if (res.statusCode == 200) {
						res.data.data.unshift({
							name: "全部",
							id: 0
						})
						that.navsList = res.data.data
					}
			
				})
			},
			//商品详情
			goGoodsDetail(ind) {
				uni.navigateTo({
					url: '/pages/filePages/goodsDetail/goodsDetail?id=' + ind + '&type=0'
				})
			},
			//选择城市
			getCitys(citys) {
				
				this.$store.commit('positionText', citys.name);
				this.$store.commit('lat', citys.lat);
				this.$store.commit('lng', citys.lng);
				let selectedAddress = citys.mergename?citys.mergename[2]:citys.name;
				this.$store.commit('selectedAddress', selectedAddress);
				this.$rangeObj(selectedAddress);
			},
			// 获取商品列表
			getGoodsData() {
				uni.showLoading({
					title: "加载中..."
				})
				// 爆款 价格 最新 好评 距离
				// 人气views、最新createtime、价格price 、评分comment
				// 1 人气爆款  2 最新上架  3 最受好评
				let latitude = uni.getStorageSync('location').latitude;
				let longitude = uni.getStorageSync('location').longitude;
				this.$request({
					url: 'product/lists',
					method: 'POST',
					data: {
						page: this.page,
						new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this
							.address2 ? this.address2 : '',
						sort:this.shopType==1?'views':this.shopType==2?'updatetime':this.shopType==3?'comment':'',
						lng: this.lng ? this.lng : longitude ? longitude : 0,
						lat: this.lat ? this.lat : latitude ? latitude : 0,
						keywords:this.keyWord,
						cat_id:this.navIndex,
						index:'index'
					}
				}).then(res => {
					uni.hideLoading();
					if(res.data.code==1){
						if(this.page==1){
							this.list = res.data.data.data;
						}else{
							this.list.push(...res.data.data.data);
						}
						this.lastPage = res.data.data.last_page;
					}else{
						
					}
				})
			},
			// 点击地址
			onLocation() {
				uni.navigateTo({
					url: '/pages/filePages/onLocation/onLocation'
				})
			},
			changeRange(e) {
				this.rangeIndex = e;
				this.page = 1;
				// 获取商品列表
				this.getGoodsData();
			},
			// 搜索
			search() {
				this.page = 1;
				// 获取商品列表
				this.getGoodsData();
			},
			// 触底事件
			onReachBottom() {
				if (this.page >= this.lastPage) {
					this.$wanlshop.msg('我是有底线的!')
				} else {
					this.page++
					this.getGoodsData();
				}
			},
		}
	}
</script>

<style lang="scss">
	.fu_chuang {
		width: 750upx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 99999;
	
		.c_fu_chuang {
			width: 686upx;
			background: #FFFFFF;
			border-radius: 24upx 24upx 24upx 24upx;
			margin-top: 382upx;
	
			.c_fu_txt_box {
				flex-wrap: wrap;
				padding-top: 34upx;
				padding-bottom: 8upx;
	
				.list_txt {
					margin-left: 46upx;
					margin-bottom: 30upx;
	
					.fu_txt {
						color: #333;
					}
				}
			}
		}
	}
	.active_item {
		background: url('@/static/store/fenglei3.png')right bottom no-repeat;
		background-size: 70%;
	}
</style>
